import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/common/app.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomeMenuView extends StatelessWidget {
  const HomeMenuView({
    super.key,
    this.items = const [],
    this.onTap,
  });
  final List<dynamic> items;
  final Function(dynamic)? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(UiTheme.boxRadiusX)),
      child: StaggeredGrid.count(
        crossAxisCount: 5,
        crossAxisSpacing: 10,
        mainAxisSpacing: UiTheme.spacing,
        children: List.generate(items.length, (index) {
          var item = items[index];
          bool isImage = item['image'] != '' && item['image'] != null;
          return UiTap(
            onTap: () {
              onTap?.call(item);
              App.push(item['url'], openType: item['target']);
            },
            child: Column(
              children: [
                Container(
                  height: 50,
                  width: 50,
                  clipBehavior: isImage ? Clip.none : Clip.hardEdge,
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.06),
                    borderRadius: BorderRadius.circular(item['radius'] ?? 15),
                  ),
                  child: isImage
                      ? Opacity(
                          opacity: UiTheme(context).match(
                            light: 1.0,
                            dark: 0.8,
                          ),
                          child: CachedNetworkImage(
                            imageUrl: item['image'],
                            fit: BoxFit.cover,
                          ),
                        )
                      : null,
                ),
                const SizedBox(height: 5),
                Text(
                  item['title'] ?? '菜单',
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(fontSize: 13),
                )
              ],
            ),
          );
        }),
      ),
    );
  }
}
